<template>
  <a-card :bordered="false">
    <template v-if="this.departId">
      <a-spin :spinning="loading">
        <a-form>
          <a-form-item label='请选择设备'>
            <a-checkbox v-for="(item, index) in plainOptions" @change="onCheckChange($event,index)" :key="index" :name="item.label" :value="item.value" :checked="item.checked">{{ item.label }}</a-checkbox>
          </a-form-item>
        </a-form>
      </a-spin>
      <div class="anty-form-btn">
        <a-button style="float: right" @click="handleSubmit" type="primary" htmlType="button" icon="form">保存</a-button>
      </div>
    </template>
    <a-card v-else :bordered="false" style="height:200px">
      <a-empty>
        <span slot="description"> 请先选择一个部门! </span>
      </a-empty>
    </a-card>
    <depart-datarule-modal ref="datarule"/>
  </a-card>
</template>

<script>
  import {getDeviceinfoListShort,updateDepartDevices,getDepartDevices} from '@/api/deviceApi'
  import DepartDataruleModal from './DepartDataruleModal'

  export default {
    name: 'DeviceSelectModal',
    components: { DepartDataruleModal },
    data(){
      return {
        departId:"",
        treeData: new Array(),
        plainOptions : [],
        defaultCheckedKeys:[],
        checkedKeys:[],
        halfCheckedKeys:[],
        expandedKeysss:[],
        allTreeKeys:[],
        autoExpandParent: true,
        checkStrictly: false,
        title:"设备绑定",
        visible: false,
        loading: false,
        selectedKeys:[]
      }
    },
    methods: {
      onCheckChange (e, indexOption) {
        if(e.target.checked){
            this.plainOptions[indexOption].checked = true;
        }else {
            this.plainOptions[indexOption].checked = false;
        }
      },
      show(departId){
        this.departId=departId
        this.loadData();
      },
      close () {
        this.reset()
        this.$emit('close');
        this.visible = false;
      },
      reset () {
        this.expandedKeysss = []
        this.checkedKeys = []
        this.defaultCheckedKeys = []
        this.loading = false
      },
      expandAll () {
        this.expandedKeysss = this.allTreeKeys
      },
      closeAll () {
        this.expandedKeysss = []
      },
      checkALL () {
        this.checkedKeys = this.allTreeKeys
      },
      cancelCheckALL () {
        this.checkedKeys = []
      },
      handleCancel () {
        this.close()
      },
      handleSubmit() {
        let that = this;
        if(!that.departId){
          that.$message.warning('请点击选择一个机构!')
        }
        that.treeData.splice(0,that.treeData.length);
        that.plainOptions.filter(option=>{
          if(option.checked){
            option.checked = true;
            that.treeData.push(option.value);
          }
        });
        let param = { departId: that.departId, devices: that.treeData};
        that.loading = true;
        updateDepartDevices(param).then(res=>{
          if(res.success){
            
          }else{
            that.$message.warning("保存成功");
          }
          that.loading = false;
        });
      },
      
      emptyCurrForm() {
        this.form.resetFields()
      },
      loadData(){
        this.loading = true;
        let that = this;
        getDeviceinfoListShort({}).then((res)=>{
            if(res.success){
              let tempData = res.result.records;
              that.plainOptions = [];
              tempData.filter(key =>{
                  let da = { label: key.name + '(' + key.productId_dictText+')' , value: key.id, checked:false }
                  that.plainOptions.push(da);
              });
              getDepartDevices({departId:that.departId}).then(res=>{
                if(res.success){
                  res.result.records.filter( dd=>{
                    that.plainOptions.filter(option=>{
                      if(dd.deviceId == option.value){
                        option.checked = true;
                        console.log("found same");
                      }
                    });
                  });
                }
              });

            }else{
              that.$message.warning("没有获取到设备");
            }
            this.loading = false;
        });
      }
    },
  }
</script>

<style scoped>

</style>